<template>
    <div class="home-index">
        <div class="welcome">
            <div class="welcome-left">
                <div class="welcome-left-avatar">
                    <a-avatar :src="userInfo.avatar" :size="100"/>
                </div>
                <div class="welcome-word">
                    <h2>晚上好,{{userInfo.nickName}},看个电影好好休息吧～</h2>
                    <div class="welcome-weather">
                        今日：🌧️&emsp;&emsp;
                    </div>
                </div>
            </div>
            <div class="welcome-right">
                helloa
            </div>
        </div>
        <div class="fg"></div>
    </div>
</template>

<script setup lang="ts">
import loginStore from "@/store/login/login-store";

const store = loginStore();
const userInfo = store.userInfo;
</script>

<style scoped lang="less">
.home-index{
    width: 100%;
    display: flex;
    flex-direction: column;

    .welcome{
        display: flex;
        padding: 20px 20px;
        height: 150px;
        flex-direction: row;


        .welcome-left{
            display: flex;
            width: 60%;
            align-items: center;

            .welcome-word{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                margin-left: 20px;

                .welcome-weather{
                    color: #CCCCCC;
                }
            }
        }

    }

    .fg{
        width: 100%;
        height: 15px;
        background-color: #E1E7EF;
    }
}
</style>
